<!--suppress ALL -->
<template>
    <div class="page eqmentMsg-page" data-page="relateEqmentMsg" style="z-index: 2;">
        <div class="navbar">
            <div class="navbar-inner sliding">
                <div class="left" @click="$root.backToTab()">
                    <a class="link">
                        <i class="icon icon-back"></i>
                        <span class="ios-only">Back</span>
                    </a>
                </div>
                <div class="title">设施详情</div>
                <div class="right" style="margin-left: 0px;">
                    <a class="link icon-only" @click="openConfirm">
                        <i id="relate_eqmentFocus" class="iconfont icon-weibiaoti-_xiaofanganquanzhongdiandanwei" style="font-size: 20px;"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="page-content ptr-content" @ptr:refresh="refreshEqmentMsg">
            <div class="ptr-preloader">
                <div class="preloader color-multi"></div>
                <div class="ptr-arrow"></div>
            </div>
            <div class="list media-list">
                <ul>
                    <li>
                        <a href="#" class="item-link item-content">
                            <div class="item-media">
                                <img src="{{staticPath}}img/mine/defEqIcon.png" class="myicon" width="80" id="relate_decter-icon">
                            </div>
                            <div class="item-inner">
                                <div class="item-title-row" style="padding-right: 0;">
                                    <div class="item-title" style="white-space: normal;">
                                        <span id="relate_decterType"></span>
                                        <span class="decter-name" id="relate_decter-name"></span>
                                    </div>
                                </div>
                                <div class="item-subtitle decter-mesage" id="relate_decter-address" style="white-space: normal;"></div>
                                <div class="item-text">
                                    <span class="decter-mesage">持续时间</span>
                                    <span class="decter-key-mesage" id="relate_decter-continue-time"></span>
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="eqmentMsg-status-content" id="relate_eqmentMsgStatus" style="border-top: 5px solid #f4f4f4;border-bottom: 5px solid #f4f4f4;">
            </div>
            <div class="list relation-decter-content">
                <ul id="relate_relation-decter">
                    
                </ul>
            </div>
            <div class="line-hr" id="relate_relation-decter-hr"></div>
            <div class="list">
                <ul>
                    <li class="decter-block-title">
                        <a href="#" class="item-link item-content" id="relate_decter-video">
                            <div class="item-inner">
                                <div class="item-title">
                                    <span>附近监控</span>
                                </div>
                                <div class="item-after" id="relate_decter-video-num">无</div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
             <div class="line-hr"></div>
            <div class="list">
                <ul>
                    <li class="decter-block-title">
                        <a href="#" class="item-link item-content" id="relate_fmapHerf">
                            <div class="item-inner">
                                <div class="item-title">
                                    <span>室内定位</span>
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="line-hr"></div>
            <div class="list">
                <ul>
                    <li class="decter-block-title">
                        <a href="#" class="item-link item-content" id="relate_decter-historyPolice">
                            <div class="item-inner">
                                <div class="item-title">
                                    <span>历史记录</span>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <!-- 是模拟量 -->
                        <div class="decter-history-chart" id="relate_historyChart-waper"></div>
                        <!-- 不是模拟量 -->
                        <div class="every-type-chart-wrap historyChartNoData-wrap">
                            <p class="chat-title" >最近24小时状态变化</p>
                            <div class="decter-history-chart decterHasAnalogChart-style" id="relate_historyChartNoData-waper"></div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="line-hr"></div>
            <div class="list">
                <ul>
                    <li class="decter-block-title">
                        <a href="#" class="item-link item-content">
                            <div class="item-inner" style="background-image:none;">
                                <div class="item-title">
                                    <span>基本信息</span>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li class="decter-block-basic-message">
                        <a href="#" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">所属单位</div>
                                <div class="item-after" id="relate_msg-1">-</div>
                            </div>
                        </a>
                    </li>
                    <li class="decter-block-basic-message">
                        <a href="#" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">所属建筑</div>
                                <div class="item-after" id="relate_msg-2">-</div>
                            </div>
                        </a>
                    </li>
                    <li class="decter-block-basic-message">
                        <a href="#" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">所属系统</div>
                                <div class="item-after" id="relate_msg-3">-</div>
                            </div>
                        </a>
                    </li>
                    <li class="decter-block-basic-message">
                        <a href="#" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">设备厂家</div>
                                <div class="item-after" id="relate_msg-4">-</div>
                            </div>
                        </a>
                    </li>
                    <li class="decter-block-basic-message">
                        <a href="#" class="item-link item-content">
                            <div class="item-inner">
                                <div class="item-title">入网时间</div>
                                <div class="item-after" id="relate_msg-5">-</div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    </div>
</template>
<style>
    .decter-table-content{
        width: 85%;
        margin: auto;
        margin: 20px auto;
        border-collapse: collapse;
        text-align: center;
        display: none;
    }
    .decter-table-content td{
        height: 30px;
        border: 1px solid rgba(221, 221, 221, 0.5);
    }
</style>
<script>
return {
    data: function() {
        return {
            id: this.$route.params.id,
            organizationId: 0,
            isConcern: 0,
            videoBean : {},//播放视频信息
            //组合式电气火灾探测器
            dataTypeIdArr : ["30", "31", "32", "33", "34", "35", "36", "37", "38"]
        }
    },
    methods: {
        //下拉刷新
        refreshEqmentMsg:function (e, done) {
            var self = this;
            var $ = self.$$;
            if (done && e) {
                setTimeout(function () {
                    self.getequipmentMsg();
                    done();
                },1000);
            }
        },
        //获取详情
        getequipmentMsg: function() {
            var self = this;
            Dao.equipmentMsg({
                userName: userInfor.accountName,
                deviceId: appKeyObj.deviceId,
                fcfId: self.id * 1
            }, function(data) {
                if (data) {
                    //关注信息
                    self.isConcern = data.isConcern;
                    if (data.isConcern == 1) {
                        $("#relate_eqmentFocus").removeClass('icon-weibiaoti-_xiaofanganquanzhongdiandanwei');
                        $("#relate_eqmentFocus").addClass('icon-star');
                        $("#relate_eqmentFocus").css("color", "#fed306");
                    }
                    //头部信息
                    if(data.icon){
                        $("#relate_decter-icon").attr('src', picDecterNo(JSON.parse(data.icon).detailIcon));
                    }else{
                        $("#relate_decter-icon").attr('src', picDecterNo());
                    }
                    $("#relate_decter-name").html(common.transNullundefinedToline(data.fcfName));
                    $("#relate_decterType").html(transFireIcon(data.fireTType));
                    $("#relate_decter-address").html(common.transNullundefinedToline(data.location));
                    //持续时间
                    if(data.durationTimeStr){
                        var stillTimeArr = ["年","月","周","天","小时","分钟","秒"];
                        for(var m=0;m<stillTimeArr.length;m++){
                            var stillTime =  data.durationTimeStr.split(stillTimeArr[m]);
                            if(stillTime.length>1){
                                $("#relate_decter-continue-time").css("color",transFireColor(data.fireTType)).html(stillTime[0]+stillTimeArr[m]);
                                break;
                            }
                        }
                    }else{
                        $("#relate_decter-continue-time").css("color",transFireColor(data.fireTType)).html(0);
                    }
                    //基本信息
                    $("#relate_msg-1").html(common.transNullundefinedToline(data.shortName));
                    $("#relate_msg-2").html(common.transNullundefinedToline(data.fbsName));
                    $("#relate_msg-3").html(common.transNullundefinedToline(data.systemName));
                    $("#relate_msg-4").html(common.transNullundefinedToline(data.producerName));
                    $("#relate_msg-5").html(common.transNullundefinedToline((data.facsCreateTime)));
                    //室内定位
                    $("#relate_fmapHerf").attr("href","/showLayerOrFmap/"+self.id+"");
                    //历史记录列表
                    $("#relate_decter-historyPolice").attr('href', '/historyPolice/' + data.fcfId + '/');
                    /*---处理图表-----------------------------------------------------------------*/
                    if (data.hasAnalog == 1) {
                        $(".historyChartNoData-wrap").hide();
                        $("#relate_historyChart-waper").empty().show();
                        self.drawHasAnalogHistoryChart(data.fcfId);
                    } else {
                        $("#relate_historyChart-waper").hide();
                        $(".historyChartNoData-waper").empty().show();
                        self.drawNoAnalogChart(data.fcfId);
                        self.showVedioAnalysisAndnoAlong(data);
                    }
                    //关联的其他监测设施
                    if(data.relateFcfList.length>0){
                        $("#relate_relation-decter-hr").show();
                        $(".relation-decter-content").show();
                        $("#relate_relation-decter").empty();
                        for(var i=0;i<data.relateFcfList.length;i++){
                            $("#relate_relation-decter").append(`
                            <li class="decter-block-title">
                                <a href="#" class="item-content">
                                    <div class="item-inner">
                                        <div class="item-title">
                                            <span style="color:#333;">关联其他设施</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <div >
                                    <p class="chat-title" style="margin-left:22px;border-left: 0px;font-size:16px;">`+transFireIcon(data.fireTType)+` `+common.transNullundefinedToline(data.relateFcfList[i].fcfName)+`</p>
                                </div>
                            </li>
                            `);
                        }
                    }else{
                        $(".relation-decter-content").hide();
                    }
                    //附近监控
                    self.findVedioNum(data.fcfId);
                }
            });
        },
        //查看视频
        findVedioNum:function(fcfId){
            videoData = [];
            Dao.getFcfRelateVideos({
                userName:userInfor.accountName,
                deviceId:appKeyObj.deviceId,
                relateObjType:1,
                relateObjId:fcfId,//探测器id
                account:userInfor.accountName
            },function(data){
                if(data && data.length>0){
                    jQuery("#relate_decter-video-num").html(`有`+data.length+`路监控`);
                    if(data.length==1){
                        if (videoData[data[0].id] == null){
                            videoData[data[0].id] = data[0];
                        }
                        jQuery("#relate_decter-video").click(function () {
                            var videoBean  = {};
                            videoBean.id = data[0].id;
                            videoBean.deviceId = data[0].deviceId;
                            videoBean.type = data[0].type;
                            videoBean.name = data[0].name;
                            videoBean.channel = data[0].channel;
                            videoBean.status = data[0].status;
                            videoBean.picUrl = data[0].picUrl;
                            videoBean.isOnline = data[0].isOnline;
                            videoBean.isConcem = data[0].isConcem == null?0:data[0].isConcem;
                            Dao.getAuthList({
                                userName:userInfor.accountName,
                                deviceId:appKeyObj.deviceId,
                                organizationId:data[0].organizationId,
                                equiptType:data[0].type,
                                orgCode:userInfor.org.orgCode,
                                authId: data[0].authId
                            },function(data) {
                                var videoKeyBean = data[0];
                                native.openVideo(JSON.stringify(videoKeyBean),JSON.stringify(videoBean));
                            },function(e) {},true);
                        });
                    }else{
                        jQuery("#relate_decter-video").attr('href', '/comvdList/' + fcfId + '/');
                    }
                }else{
                    jQuery("#relate_decter-video-num").html("无");
                    jQuery("#relate_decter-video").attr('href', '');
                }
            });
        },
        //24小时状态变化 有模拟量
        drawHasAnalogHistoryChart:function(fcfId){
            var self = this;
            var yDataValue = [];
            var yData = [];
            var yMax = null;
            common.loading(1);
            Dao.getAnalogObjectDtos({
                userName: userInfor.accountName,
                deviceId: appKeyObj.deviceId,
                fcfId:fcfId
            }, function(data) {
                if(data && data.length>0){
                    //处理模拟量类型数据  设备电压不画
                    for(var i=0;i<data.length;i++){
                        yDataValue = [];
                        yData = [];
                        if(data[i].dataTypeId != 3){
                            if(data[i].detail && data[i].detail.length>0){
                                let dataTime = data[i].detail;
                                for(var n=0;n< dataTime.length;n++){
                                    yDataValue.push( dataTime[n].analogValue);
                                    yData.push({"name":dataTime[n].datetime,"value":[moment(dataTime[n].datetime).format("YYYY-MM-DD HH:mm"),dataTime[n].analogValue]});
                                }
                                $("#relate_historyChart-waper").append(`
                                    <div class="every-type-chart-wrap" id="relate_every-historyChart-`+data[i].dataTypeId+`" style="padding:20px">
                                        <p class="chat-title">最近24小时`+data[i].dataTypeName+`变化（`+data[i].detail[0].analogUnits+`）</p>
                                        <div class="every-type-chart decterHasAnalogChart-style" id="relate_historyChart-bar-`+data[i].dataTypeId+`">

                                        </div>
                                    </div>
                                `);
                                //y轴最大值
                                yMax = Math.max(...yDataValue);
                                yMax = Math.max(yMax,data[i].thresholdMax);
                                self.drawEqChartEqmentMsg(yDataValue,yData,yMax,data[i].thresholdMin,data[i].thresholdMax,data[i].dataTypeName,"relate_historyChart-bar-"+data[i].dataTypeId);
                            }
                            //实时图表--展示模拟量最后一条
                            self.drawTopChartOrPic(data);
                        }
                    }
                }else{
                    $("#relate_historyChart-waper").html(`<img src="`+listNoDataPic()+`" />`);
                }
                common.loading(0);
            });
        },
        //展示模拟量最后一条
        drawTopChartOrPic: function(data) {
            var self = this;
            jQuery("#relate_eqmentMsgStatus").html(`
            <div class="every-type-chart-wrap" id="relate_topChartContain"></div>
            <table class="decter-table-content">
                <thead>
                    <tr style="color: #999;"><td>类型</td><td>A相</td><td>B相</td><td>C相</td></tr>
                </thead>
                <tbody id="decterMes-table">
                    <tr>
                        <td>温度</td>
                        <td id="decterMes_36">-</td>
                        <td id="decterMes_37">-</td>
                        <td id="decterMes_38">-</td>
                    </tr>
                    <tr>
                        <td>电流</td>
                        <td id="decterMes_33">-</td>
                        <td id="decterMes_34">-</td>
                        <td id="decterMes_35">-</td>
                    </tr>
                    <tr>
                        <td>电压</td>
                        <td id="decterMes_30">-</td>
                        <td id="decterMes_31">-</td>
                        <td id="decterMes_32">-</td>
                     </tr>
                </tbody>
            </table>`);
            if(data && data.length>0){
                for(var i=0;i<data.length;i++){
                    if(data[i].detail && data[i].detail.length>0){
                        self.showRealTimeMes(data[i].dataTypeId,data[i].dataTypeName,data[i].detail,data[i].thresholdMin,data[i].thresholdMax);
                    }
                }
            }else{
                $("#relate_topChartContain").html(`<img src="`+listNoDataPic()+`" />`);
            }
        },
        //视频分析 && 不是模拟量
        showVedioAnalysisAndnoAlong:function(data){
            var self = this;
            jQuery("#relate_eqmentMsgStatus").html(`
                <div class="every-type-chart-wrap" id="relate_topChartContain"></div>`);
            if(data.isVideoAnalysis==1){
                $("#relate_topChartContain").html(`
                <div class="no-hasAnalog" style="text-align: center;">
                    <div class="show-vedio-btn">查看监控</div>
                    <img src="`+picVedioNo(data.videoAnalysisPic)+`" style="width:95%;height:160px;" />
                </div>
            `);
                jQuery(".show-vedio-btn").off().on('click',{'data':data}, function(event) {
                    var data = event.data.data.videoList;
                    videoData = [];
                    Dao.getFcfRelateVideos({
                        userName: userInfor.accountName,
                        deviceId: appKeyObj.deviceId,
                        relateObjType:1,
                        relateObjId:self.id * 1,
                        account:userInfor.accountName,
                    },function(data) {
                        if (data != null &&data.length > 0) {
                            if (videoData[data[0].id] == null){
                                videoData[data[0].id] = data[0];
                            }
                            self.videoBean.id = data[0].id;
                            self.videoBean.deviceId = data[0].deviceId;
                            self.videoBean.type = data[0].type;
                            self.videoBean.name = data[0].name;
                            self.videoBean.channel = data[0].channel;
                            self.videoBean.status = data[0].status;
                            self.videoBean.picUrl = data[0].picUrl;
                            self.videoBean.isOnline = data[0].isOnline;
                            self.videoBean.region = data[0].region;
                            self.videoBean.organizationId = data[0].organizationId;
                            self.videoBean.isConcem = data[0].isConcem == null?0:data[0].isConcem;
                            Dao.getAuthList({
                                userName:userInfor.accountName,
                                deviceId:appKeyObj.deviceId,
                                organizationId:data[0].organizationId,
                                equiptType:data[0].type,
                                orgCode:userInfor.org.orgCode,
                                authId: data[0].authId
                            },function(data) {
                                common.loading(0);
                                var videoKeyBean = data[0];
                                native.openVideo(JSON.stringify(videoKeyBean),JSON.stringify(self.videoBean));
                            });
                        } else {
                            app.methods.showToastCenter("暂无播放此视频权限");
                        }
                    });
                });
            }else{
                $("#relate_topChartContain").html(`
            <div class="no-hasAnalog">
                <div class="no-hasAnalog-left">
                    <img src="` + picDecterNo(data.statusPic) + `" />
                </div>
                <div class="no-hasAnalog-right">
                    <p class="no-hasAnalog-typeText" style="color:`+transFireColor(data.fireTType)+`">
                    ` + common.transNullundefinedToline(data.statusAlias) +
                    `</p>
                    <span class="no-hasAnalog-type">当前状态</span>
                </div>
            </div>`);
            }
        },
        //展示实时图表
        showRealTimeMes:function(dataTypeId,dataTypeName,data,thresholdMin,thresholdMax){
            var self = this;
            var color = "#77be07";
            var min = 0;
            var max = 2.5;
            var splitNumber = 5;
            var currentIdName = hasAnalogTypeArr[dataTypeId] || dataTypeName;
            var currentIdData = data[data.length-1];
            var currentAnalogUnits = data[data.length-1].analogUnits;
            var currentAnalogValue = data[data.length-1].analogValue;
            if(currentAnalogValue>thresholdMin && currentAnalogValue<thresholdMax){
                color = "#77be07";
            }else{
                color = "#fe6668";
            }
            if(dataTypeId!=3){
                //液位-水箱
                if(dataTypeId==2){
                    $("#relate_topChartContain").append(`
                        <div class="every-type-chart-wrap">
                            <div class="every-type-chart decterHasAnalogChart-style" id="relate_decterHasAnalogChart"></div>
                            <div class="right-num">
                                <span style="color:`+color+`">`+currentAnalogValue+`</span>
                                <p>当前`+currentIdName+`（`+currentAnalogUnits+`）</p>
                            </div>
                        </div>
                    `);
                    self.drawWaterChart((thresholdMax-currentAnalogValue),currentAnalogValue);
                }
                //码表
                else{
                    //是组合式电气火灾探测器
                    if(self.dataTypeIdArr.find((n)=> n == dataTypeId)){
                        var colo = "#000";
                        jQuery("#relate_topChartContain").hide();
                        jQuery(".decter-table-content").show();
                        if(currentAnalogValue<thresholdMin || currentAnalogValue>thresholdMax){
                            colo = "#fe6668";
                        }else{
                            colo = "#000";
                        }
                        jQuery("#decterMes_"+dataTypeId).html(`<span style="color:`+colo+`">`+currentAnalogValue+currentAnalogUnits+`</span>`);
                    }else {
                        jQuery("#relate_topChartContain").show();
                        jQuery("#relate_topChartContain").append(`
                        <div class="every-type-chart-wrap">
                            <div class="decterHasAnalogChart-style" id="hasAnalogChart-clock-`+dataTypeId+`"></div>
                            <div class="right-num">
                                <span style="color:`+color+`">`+currentAnalogValue+`</span>
                                <p>当前`+currentIdName+`（`+currentAnalogUnits+`）</p>
                            </div>
                        </div>`);
                        //压力
                        if(dataTypeId==1){
                            max = 2.5;
                            self.drawClockChart(dataTypeId,currentAnalogValue,currentAnalogUnits,min,max,splitNumber);
                        }
                        //湿度
                        else if(dataTypeId==6){
                            splitNumber = 10;
                            max = 100;
                            self.drawClockChart(dataTypeId,currentAnalogValue,currentAnalogUnits,min,max,splitNumber);
                        }
                        //温度
                        else if(dataTypeId==5){
                            self.drawTempClockChart(dataTypeId,currentAnalogValue,currentAnalogUnits);
                        }
                        //剩余电流码表
                        else if(dataTypeId == 39){
                            self.drawHalfClockChart(dataTypeId,currentAnalogValue,currentAnalogUnits,1000,5);
                        }else{
                            //电压
                            if(dataTypeId==7 || dataTypeId==8 || dataTypeId==9 ){
                                max = 450;
                                splitNumber = 3;
                            }
                            //电流
                            else if(dataTypeId==10 || dataTypeId==11|| dataTypeId==12 ){
                                max = 100;
                                splitNumber = 5;
                            }
                            self.drawHalfClockChart(dataTypeId,currentAnalogValue,currentAnalogUnits,max,splitNumber);
                        }
                    }
                }
            }
        },
        //24小时状态变化图表---没有模拟量
        drawNoAnalogChart: function(fcfId) {
            var self = this;
            var xData = [];
            var yData = [];
            Dao.getFacsHisStatus({
                userName: userInfor.accountName,
                deviceId: appKeyObj.deviceId,
                fcfId:fcfId
            }, function(data) {
                if(data && data.length>0){
                    for(var i=0;i<data.length;i++){
                        var date = data[i].date.toString().slice(8, 10) + ":00";
                        xData.push(date);
                        var y = data[i].fireTType;
                        if( y==0 || !y){
                            y = 5;
                        }else if( y == 10){
                            y = 25;
                        }else if( y == 20){
                            y = 20;
                        }else if( y == 30){
                            y = 15;
                        }else if( y == 40){
                            y = 10;
                        }else{
                             y = 5;
                        }
                        yData.push( y);
                    }
                    self.hoursChangeChart(xData,yData);
                }else{
                    $("#relate_historyChartNoData-waper").html(`<img src="`+listNoDataPic()+`" />`);
                }
            });
        },
        //echart画水箱
        drawWaterChart: function(top,bottom){
            var waterChart = echarts.init(document.getElementById("relate_decterHasAnalogChart"));
            var option = {
                title: null,
                tooltip: {},
                xAxis3D: {
                    type: 'category',
                    data: ['']
                },
                yAxis3D: {
                    type: 'category',
                    data: ['']
                },
                zAxis3D: {
                    type: 'value'
                },
                grid3D: {
                    show: false, //是否显示三维迪卡尔坐标
                    boxWidth: 80,
                    boxDepth: 20,
                    axisPointer: {
                        show: false
                    },
                    viewControl: {
                        alpha: 15, //视角绕 x 轴，即上下旋转的角度(与beta一起控制视野成像效果)
                        beta: 60 //视角绕 y 轴，即左右旋转的角度
                    },
                    top: "-5%", //组件的视图离容器上侧的距离
                    left: "-25%",
                    bottom: "-10%"
                },
                series: [{
                    type: 'bar3D',
                    barSize: 75,
                    data: [
                        [0, 0, bottom]
                    ],
                    stack: 'stack',
                    shading: 'lambert',
                    itemStyle: { //柱条样式
                        color: '#428ceb',
                        opacity: 0.9
                    },
                    emphasis: {
                        label: {
                            show: false
                        }
                    }
                }, {
                    type: 'bar3D',
                    barSize: 75,
                    data: [
                        [0, 0, top]
                    ],
                    stack: 'stack',
                    shading: 'lambert',
                    itemStyle: { //柱条样式
                        color: '#428ceb',
                        opacity: 0.5
                    },
                    emphasis: {
                        label: {
                            show: false
                        }
                    }
                }]
            }
            waterChart.setOption(option);
        },
        //码表-压力-湿度
        drawClockChart: function(dataTypeId,currentAnalogValue,currentAnalogUnits,min,max,splitNumber){
            var self = this;
            var _score = currentAnalogValue;
            var myChart_safetyIndex = echarts.init(document.getElementById("hasAnalogChart-clock-"+dataTypeId));
            var option_safetyIndex = {
                tooltip:null,
                series: [{
                    type: 'gauge',
                    min:min,
                    max:max,
                    radius: "70%",
                    center: ["30%", "52%"],
                    splitNumber: splitNumber,
                    //仪表盘标题。
                    title: {
                        show: true,
                        textStyle: {
                            fontSize: 15
                        }
                    },
                    axisLabel: { //文字样式（及“10”、“20”等文字样式）
                        distance: 5, //文字离表盘的距离
                        fontSize: 12,
                    },
                    axisLine: { // 坐标轴线
                        lineStyle: { // 属性lineStyle控制线条样式
                            color: [
                                [1, '#000']
                            ],
                            shadowBlur: 2,
                            width: 8,
                            shadowColor: '#000', //默认透明
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        splitNumber: 5,
                        length: 14,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: '#000'
                        }
                    },
                    splitLine: { //分割线样式（及10、20等长线样式）
                        length: 18,
                        lineStyle: { // 属性lineStyle控制线条样式
                            color: '#000'
                        }
                    },
                    pointer: {
                        length: '60%',
                        width: '3',
                    },
                    detail: {
                        formatter:currentAnalogUnits,
                        textStyle: {
                            fontSize: 12
                        }
                    },
                    data: [{
                        value:_score,
                        name: '',
                    }]
                }]
            };
            if (option_safetyIndex && typeof option_safetyIndex === "object") {
                myChart_safetyIndex.setOption(option_safetyIndex, true);
            }
        },
        //码表-温度
        drawTempClockChart:function(dataTypeId,currentAnalogValue,currentAnalogUnits){
            currentAnalogValue  = 20;
            var self = this;
            var realNum = -25-(currentAnalogValue);
            if(realNum<=0){
                realNum = Math.abs(realNum);
            }
            var myChart_safetyIndex = echarts.init(document.getElementById("hasAnalogChart-clock-"+dataTypeId));
            var option_safetyIndex = {
                series: [{
                    type: 'gauge',
                    min:-25,
                    max:100,
                    radius: "70%",
                    center: ["30%", "52%"],
                    splitNumber: 10,
                    //仪表盘标题。
                    title: {
                        show: true,
                        textStyle: {
                            fontSize: 15
                        }
                    },
                    axisLabel: { //文字样式（及“10”、“20”等文字样式）
                        distance: 5, //文字离表盘的距离
                        fontSize: 12,
                    },
                    axisLine: { // 坐标轴线
                        lineStyle: { // 属性lineStyle控制线条样式
                            color:[[realNum/125, '#fe6668'],[1, '#999']],
                            width: 8,
                            // shadowBlur: 2,
                            // shadowColor: '#999', //默认透明
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        splitNumber: 5,
                        length: 3,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: '#fff'
                        }
                    },
                    splitLine: { //分割线样式（及10、20等长线样式）
                        length: 6,
                        lineStyle: { // 属性lineStyle控制线条样式
                            color: '#fff',
                        }
                    },
                    pointer: {
                        length: '60%',
                        width: '3',
                    },
                    detail: {
                        formatter:currentAnalogUnits,
                        textStyle: {
                            fontSize: 12
                        }
                    },
                    data: [{
                        value:currentAnalogValue,
                        name: '',
                    }]
                }]
            };
            if (option_safetyIndex && typeof option_safetyIndex === "object") {
                myChart_safetyIndex.setOption(option_safetyIndex, true);
            }
        },
        //码表-ABC相-电气火灾剩余电流传感器
        drawHalfClockChart:function(dataTypeId,currentAnalogValue,currentAnalogUnits,max,splitNumber){
            var self = this;
            var myChart_safetyIndex = echarts.init(document.getElementById("hasAnalogChart-clock-"+dataTypeId));
            var option_safetyIndex = {
                series: [{
                    type: 'gauge',
                    min:0,
                    max:max,
                    radius: "110%",
                    center: ["35%", "75%"],
                    startAngle: 180,
                    endAngle:90,
                    splitNumber: splitNumber,  //5等分
                    //仪表盘标题。
                    title: {
                        show: true,
                        textStyle: {
                            fontSize: 15
                        }
                    },
                    axisLabel: { //文字样式（及“10”、“20”等文字样式）
                        distance: 5, //文字离表盘的距离
                        fontSize: 12,
                    },
                    axisLine: { // 坐标轴线
                        lineStyle: { // 属性lineStyle控制线条样式
                            color: [
                                [1, '#000']
                            ],
                            shadowBlur: 2,
                            width: 8,
                            shadowColor: '#000', //默认透明
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        splitNumber: 5,
                        length: 14,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: '#000'
                        }
                    },
                    splitLine: { //分割线样式（及10、20等长线样式）
                        length: 18,
                        lineStyle: { // 属性lineStyle控制线条样式
                            color: '#000'
                        }
                    },
                    pointer: {
                        length: '60%',
                        width: '3',
                    },
                    detail:null,
                    data: [{
                        value:currentAnalogValue,
                        name: '',
                    }]
                }]
            };
            if (option_safetyIndex && typeof option_safetyIndex === "object") {
                myChart_safetyIndex.setOption(option_safetyIndex, true);
            }
        },
        //画折线图
        drawEqChartEqmentMsg: function(yDataValue, yAxisData,yMax,thresholdMin,thresholdMax,title,el) {
            var thresholdArr = [];
            if (thresholdMin || thresholdMin == 0) {
                thresholdArr.push({
                    name: '下限' + thresholdMin,
                    yAxis: thresholdMin ? thresholdMin : 0
                })
            }
            if (thresholdMax || thresholdMax == 0) {
                thresholdArr.push({
                    name: '上限' + thresholdMax,
                    yAxis: thresholdMax ? thresholdMax : 0
                })
            }
            var eqChart = echarts.init(document.getElementById(el));
            eqChart.setOption({
                title: {
                    text: "",
                },
                grid: {
                    top:"10%",
                    left: '2%',
                    right: '12%',
                    bottom: '0',
                    containLabel: true
                },
                tooltip: {
                    backgroundColor: 'white',
                    borderColor: 'gray', // 提示边框颜色
                    borderRadius: 4, // 提示边框圆角，单位px，默认为4
                    borderWidth: 1,
                    position: function(p) { //其中p为当前鼠标的位置
                        return [p[0] - 28, p[1] - 70];
                    },
                    padding: 5,
                    trigger: 'axis',
                    formatter: function (e) {
                        var data = e[0];
                        return `<span style='color:gray;font-size:12px;'>`+data.value[0]+`</span>
                                <br/>
                                <span style='color:red;font-size:14px;'>`+data.value[1]+`</span>`;
                    },
                    textStyle: { align: 'center' },
                    confine: true,
                },
                xAxis: [{
                    type: 'time',
                    boundaryGap: false,
                    axisLine:{
                        lineStyle:{
                            color:'rgba(225, 225, 225, 0.3)'
                        },
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#666"
                        },
                        formatter:function (params) {
                            return moment(params).format("HH:mm");
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#f4f7f9'
                        }
                    },
                }],
                yAxis: [{
                    type: 'value',
                    max:yMax,
                    axisLine:{
                        lineStyle:{
                            color:'rgba(225, 225, 225, 0.3)'
                        },
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#666"
                        },
                        formatter:function (params) {
                            if(params==yMax){
                                return yMax;
                            }else{
                                return "";
                            }
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#f4f7f9'
                        }
                    },
                }],
                series: [{
                    type: 'line',
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(55, 139, 246, 0.6)' },
                                { offset: 0.5, color: 'rgba(55, 139, 246, 0.4)' },
                                { offset: 1, color: '#fff' }
                            ])
                        }
                    },
                    smooth: true,
                    showSymbol: false,  //不展示节点
                    itemStyle: {
                        normal: {
                            color: "rgba(55, 139, 246, 0.8)", // 会设置点和线的颜色，所以需要下面定制
                            borderColor: "rgba(55, 139, 246, 0.8)" // 点边线的颜色
                        }
                    },
                    lineStyle: {
                        normal: {
                            color: "rgba(55, 139, 246,0.9)" // 线条颜色
                        }
                    },
                    data: yAxisData,
                    markLine: {
                      itemStyle:{
                        normal:{
                            lineStyle:{
                                type:'dashed',
                                color:'#fe6668',
                            },
                            label:{
                                show:true,
                                position:'end',
                                formatter:function (params) {
                                   return params.name;
                                }
                            }
                        }
                      },
                      silent: false,
                      data: thresholdArr
                    }
                }]
            });
        },
        //不是模拟量---最近二十四小时状态变化
        hoursChangeChart:function(xData,yData){
            var self = this;
            //报警
            var fireColr = new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                    {offset: 0, color: 'rgba(254, 102, 104, 1)'},
                    {offset: 0.002, color: 'rgba(254, 102, 104, 0.95)'},
                    {offset: 0.03, color: 'rgba(254, 102, 104, 0.15)'},
                    {offset: 0.7, color: 'rgba(254, 102, 104, 0.1)'},
                    {offset: 0.9, color: 'rgba(254, 102, 104, 0.05)'},
                    {offset: 1, color: 'rgba(254, 102, 104, 0.05)'}
                ]
            );
            //故障
            var faultColr = new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                    {offset: 0, color: 'rgba(248, 183, 40, 1)'},
                    {offset: 0.002, color: 'rgba(248, 183, 40, 0.95)'},
                    {offset: 0.03, color: 'rgba(248, 183, 40, 0.15)'},
                    {offset: 0.7, color: 'rgba(248, 183, 40, 0.1)'},
                    {offset: 0.9, color: 'rgba(248, 183, 40, 0.05)'},
                    {offset: 1, color: 'rgba(248, 183, 40, 0.05)'}
                ]
            );
            //屏蔽
            var shieldColr = new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                    {offset: 0, color: 'rgba(153, 153, 153, 1)'},
                    {offset: 0.002, color: 'rgba(153, 153, 153, 0.95)'},
                    {offset: 0.03, color: 'rgba(153, 153, 153, 0.15)'},
                    {offset: 0.7, color: 'rgba(153, 153, 153, 0.1)'},
                    {offset: 0.9, color: 'rgba(153, 153, 153, 0.05)'},
                    {offset: 1, color: 'rgba(153, 153, 153, 0.05)'}
                ]
            );
            //联动
            var linkColr = new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                    {offset: 0, color: 'rgba(55, 139, 246, 1)'},
                    {offset: 0.002, color: 'rgba(55, 139, 246, 0.95)'},
                    {offset: 0.03, color: 'rgba(55, 139, 246, 0.15)'},
                    {offset: 0.7, color: 'rgba(55, 139, 246, 0.1)'},
                    {offset: 0.9, color: 'rgba(55, 139, 246, 0.05)'},
                    {offset: 1, color: 'rgba(55, 139, 246, 0.05)'}
                ]
            );
            //正常
            var normalColr = new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                    {offset: 0, color: 'rgba(119, 190, 7, 1)'},
                    {offset: 0.002, color: 'rgba(119, 190, 7, 0.95)'},
                    {offset: 0.03, color: 'rgba(119, 190, 7, 0.15)'},
                    {offset: 0.7, color: 'rgba(119, 190, 7, 0.1)'},
                    {offset: 0.9, color: 'rgba(119, 190, 7, 0.05)'},
                    {offset: 1, color: 'rgba(119, 190, 7, 0.05)'}
                ]
            );
            var hourChart = echarts.init(document.getElementById("relate_historyChartNoData-waper"));
            hourChart.setOption({
                title: {
                    text: '',
                },
                tooltip : {
                    formatter: function (e) {
                      if(e.value==5){
                          return "当前状态：正常";
                      }
                      else if(e.value==10){
                          return "当前状态：联动";
                      }
                      else if(e.value==15){
                          return "当前状态：屏蔽";
                      }
                      else if(e.value==20){
                          return "当前状态：故障";
                      }
                      else if(e.value==25){
                          return "当前状态：报警";
                      }
                    }
                },
                grid: {
                    top:"12%",
                    left: '-2%',
                    right: '4%',
                    bottom: '0',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : xData,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type:"dotted",
                                color: 'rgba(225, 225, 225, 0.3)'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine:{
                            lineStyle:{
                                color:'rgba(225, 225, 225, 0.3)'
                            },
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#666"
                            }
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        // interval:10,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(225, 225, 225, 0.3)'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine:{
                            lineStyle:{
                                color:'rgba(225, 225, 225, 0.3)'
                            },
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#666"
                            },
                            formatter: function (value) {
                                if(value==5){
                                    return "正常";
                                }
                                else if(value==10){
                                    return "联动";
                                }
                                else if(value==15){
                                    return "屏蔽";
                                }
                                else if(value==20){
                                    return "故障";
                                }
                                else if(value==25){
                                    return "报警";
                                }
                            },
                        },
                    }
                ],
                series : [
                    {
                        type: 'bar',
                        barWidth:"100%",
                        itemStyle: {
                            normal: {
                                color:function(params) {
                                    if(params.value==5){
                                        return normalColr;
                                    }else if(params.value==10){
                                        return linkColr;
                                    }else if(params.value==15){
                                        return shieldColr;
                                    }else if(params.value==20){
                                        return faultColr;
                                    }else if(params.value==25){
                                        return fireColr;
                                    }
                                } 
                            },
                        },
                        data:yData
                    }
                ]
            });
        },
        backToPrePage: function() {
            app.methods.freshEqment();
            app.methods.backToTab();
        },
        openConfirm: function() {
            var self = this;
            if (self.isConcern == 1) { //取消关注
                app.params.dialog.buttonCancel = "取消";
                app.params.dialog.buttonOk = "确认";
                    //取消关注
                    common.loading(1);
                    Dao.focusOnOff({
                        userAccount: userInfor.accountName,
                        userName: userInfor.accountName,
                        deviceId: appKeyObj.deviceId,
                        type: 1,
                        concemId: self.id,
                    }, function(data) {
                        common.loading(0);
                        app.methods.showToastCenter("取消关注成功");
                        $("#relate_eqmentFocus").removeClass('icon-star');
                        $("#relate_eqmentFocus").addClass('icon-weibiaoti-_xiaofanganquanzhongdiandanwei');
                        $("#relate_eqmentFocus").css("color", "#fff");
                        self.isConcern = 0;
                    }, function(e) {
                        common.loading(0);
                        app.methods.showToastCenter("取消关注失败");
                    });
            } else { //关注
                common.loading(1);
                Dao.addUserConcem({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    userAccount: userInfor.accountName,
                    type: 1,
                    concemId: self.id,
                }, function(data) {
                    common.loading(0);
                    app.methods.showToastCenter("关注成功");
                    $("#relate_eqmentFocus").removeClass('icon-weibiaoti-_xiaofanganquanzhongdiandanwei');
                    $("#relate_eqmentFocus").addClass('icon-star');
                    $("#relate_eqmentFocus").css("color", "#fed306");
                    self.isConcern = 1;
                }, function(e) {
                    common.loading(0);
                    app.methods.showToastCenter("关注失败");
                });
            }
        },
    },
    on: {
        pageInit: function(e, page) {
            var self = this;
            self.getequipmentMsg();
        },
        pageBeforeRemove: function(e, page) {

        },
    }
}
</script>